<div class="bg-white border-b border-gray-200 p-4">
  <div class="flex items-center justify-between">
    <div class="flex items-center space-x-4">
      <!-- 撤销/重做按钮 -->
      <div class="flex space-x-1">
        <button
          [disabled]="!undoRedoService.state().canUndo"
          (click)="undo()"
          class="p-2 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
          title="撤销 (Ctrl+Z)"
        >
          <svg class="w-4 h-4 fill-none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"></path>
          </svg>
        </button>
        <button
          [disabled]="!undoRedoService.state().canRedo"
          (click)="redo()"
          class="p-2 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
          title="重做 (Ctrl+Y)"
        >
          <svg class="w-4 h-4 fill-none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M21 10H11a8 8 0 00-8 8v2m18-10l-6 6m6-6l-6-6"></path>
          </svg>
        </button>
      </div>

      <!-- 工具选择 -->
      <div class="flex space-x-2">
        @for (tool of tools; track tool.id) {
          <button
            (click)="selectTool(tool.id)"
            [class]="getToolButtonClass(tool.id)"
          >
            {{ tool.name }}
          </button>
        }
      </div>

      <!-- 快速添加按钮 -->
      <div class="flex space-x-2 border-l border-gray-200 pl-4">
        <button
          (click)="addTable()"
          class="px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm"
        >
          + 表格
        </button>
        <button
          (click)="addNote()"
          class="px-3 py-2 bg-green-600 text-white rounded hover:bg-green-700 text-sm"
        >
          + 注释
        </button>
        <button
          (click)="addArea()"
          class="px-3 py-2 bg-purple-600 text-white rounded hover:bg-purple-700 text-sm"
        >
          + 区域
        </button>
      </div>
    </div>

    <!-- 保存状态指示器 -->
    <div class="flex items-center space-x-2">
      @if (saveStateService.hasUnsavedChanges()) {
        <span class="text-amber-600 text-sm flex items-center">
          <svg class="w-4 h-4 mr-1 fill-none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
          </svg>
          有未保存的更改
        </span>
      } @else {
        <span class="text-green-600 text-sm flex items-center">
          <svg class="w-4 h-4 mr-1 fill-none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
          已保存
        </span>
      }

      @if (saveStateService.lastSaved()) {
        <span class="text-gray-500 text-xs">
          上次保存: {{ formatLastSaved(saveStateService.lastSaved()!) }}
        </span>
      }

      @if (saveStateService.currentProject()) {
        <span class="text-gray-700 text-sm font-medium">
          {{ saveStateService.currentProject() }}
        </span>
      }
    </div>
  </div>
</div>
